{% load staticfiles %}{% load conversejs %}
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
    <meta name="description" content="嗨圈子"/>
    <link rel="shortcut icon" href="{% static 'hqz/images/favicon.ico' %}">
    <title>嗨圈子</title>
    {% comment %} {% conversejs_static %} {% endcomment %}
    <link rel="stylesheet" type="text/css" href="{% static 'hqz/css/bootstrap.css' %}"/>
    <link rel="stylesheet" type="text/css" href="{% static 'hqz/css/bootstrap-theme.min.css' %}"/>
    {% comment %}<link rel="stylesheet" type="text/css" href="{% static 'hqz/css/theme.css' %}"/> {% endcomment %}

    <link rel="stylesheet" type="text/css" media="screen" href="{% static 'hqz/css/carousel.css' %}"/>
    <script src="{% static 'hqz/js/bootstrap-carousel.js'%}"></script>
    {% comment %}<script src="{% static 'hqz/js/strophe.js' %}"></script>{% endcomment %}
    {% comment %}<script src="{% static 'hqz/js/converse.min.js' %}"></script>{% endcomment %}
    <script src="{% static 'hqz/js/locale/locales.js' %}"></script>
    <script src="{% static 'hqz/js/jquery-1.10.2.min.js' %}"></script>
    <style>
      body {
        background-color: #EFEFEF;
      }
   
    </style>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
        <script src="{% static 'hqz/js/html5shiv.js' %}"></script>
        <script src="{% static 'hqz/js/respond.min.js' %}"></script>
    <![endif]-->
</head>
<body>
	<div class="navbar navbar-static">
		<div class="container">
			<div class="nav pull-left navbar-nav">
				<a target="ext" href="#">
					<img src="{% static 'hqz/images/logo.png' %}" alt="">
				</a>
			</div>
			
			<div class="nav pull-right navbar-nav">
				<a href="">
				<img src="{% static 'hqz/images/logout.png' %}" alt="">
				</a>
			</div>
		</div>
	</div>
	
	<div class="container">
		<div class="row">
			<div class="col-md-1">
				<button type="button" class="btn btn-default btn-lg btn-hiquanzi-left-large btn-hiquanzi-style1">
					<span class="glyphicon glyphicon-chevron-left hiquanzi-white"></span> 
				</button>
			</div>
			<div class="col-md-10">
				<div id="myCarousel" class="carousel slide">
					<div class="carousel-inner">
                        {% if active_list %}
                            {% for active in active_list %}
                               {% if forloop.counter == 1  %}

                            	<div class="item active">
							<div id="slide-1" class="row">
								<div class="carousel-caption-1">
									<h1>{{  active.name  }}</h1>
									<h4>{{ active.start_time|date:"Y年m月d日" }}   {{ active.address }}</h4>
								</div>
								<div class="carousel-caption-2">
									<p><a class="btn btn-lg btn-primary" role="button" href="#">开始活动</a></p>
								</div>
							</div>
						</div>
                                   {% else %}
                                   	<div class="item">
							<div id="slide-1" class="row">
								<div class="carousel-caption-1">
									<h1>  {{  active.name  }}</h1>
									<h4>{{ active.start_time|date:"Y年m月d日" }}   {{ active.address }}</h4>
								</div>
								<div class="carousel-caption-2">
									<p><a class="btn btn-lg btn-primary" role="button" href="#">开始活动</a></p>
								</div>
							</div>
						</div>
                                {% endif %}

                            {% endfor %}
                            {% else %}
                            <div id="slide-1" class="row">
								<div class="carousel-caption-1">
									<h1>没有活动</h1>
									<h4>{{ active.start_time|date:"Y年m月d日" }}   {{ active.address }}</h4>
								</div>

							</div>
                        {% endif %}
						

						

					</div>

					<div class="row carousel-caption-3">
						<a data-slide="prev" href="#myCarousel">
							<div class="col-md-4">
								<img src="{% static 'hqz/images/s02.png' %}" alt="">
								<h4>上个活动</h4>
							</div>					
						</a>
						<div class="col-md-4">
						</div>
						<a data-slide="next" href="#myCarousel">
							<div class="col-md-4">
								<img src="{% static 'hqz/images/s03.png' %}" alt="">
								<h4>下个活动</h4>
							</div>						
						</a>
					</div>						

				</div>	
				<div class="row">
					<div class="col-md-1">
						<h3>基</h3>
						<h3>友</h3>
						<h3>帮</h3>
					</div>
					<div class="col-md-1">
						<button type="button" class="btn btn-default btn-lg btn-hiquanzi-left-small btn-hiquanzi-style1">
							<span class="glyphicon glyphicon-chevron-left hiquanzi-white"></span> 
						</button>
					</div>
					<div class="col-md-9">
						<div class="row">
                            {% if friend_list %}
                                {% for friend in friend_list %}
							<div class="col-md-3">
								<a href="#" class="thumbnail">
								
									<img src="{% static 'hqz/images/face.png' %}" alt="">
                                    <p>{{ friend }}</p>
								</a>
							</div>
                                {% endfor %}
                            {% endif %}
							<div class="col-md-3">
								<a href="#" class="thumbnail hiquanzi-span-center">
									<span class="glyphicon glyphicon-plus btn-hiquanzi-add"></span>
								</a>
							</div>	
						</div>						
					</div>
					<div class="col-md-1">
						<button type="button" class="btn btn-default btn-lg btn-hiquanzi-left-small btn-hiquanzi-style1">
							<span class="glyphicon glyphicon-chevron-right hiquanzi-white"></span> 
						</button>	
					</div>						
				</div>

			</div>
			<div class="col-md-1">
				<button type="button" class="btn btn-default btn-lg btn-hiquanzi-left-large btn-hiquanzi-style1">
					<span class="glyphicon glyphicon-chevron-right hiquanzi-white"></span> 
				</button>			
			</div>			
		</div>	
	</div>




{% conversejs_initialize %}


<!-- Bootstrap core JavaScript
    ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="{% static 'hqz/js/bootstrap.min.js' %}"></script>


{% comment %}<script src="{% static 'hqz/js/bootstrap.min.js' %}"></script>
<script src="{% static 'hqz/js/holder.js' %}"></script>{% endcomment %}
</body>
</html>